<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建新元素</title>
    <script src="../../js/jquery-1.4.2.js"></script>
</head>
<body>
    <button id="b1">创建新元素</button>
    <button id="b2">删除元素</button>
</body>
<script>

    $(function(){
        //删除元素
        $("#b2").click(function(){
            //1. 获取父元素body
            //2. 获取body中所有的div
            //3. 从第一个开始删除
           // $("body > div").remove()
           //  var oBody = $("body")[0] //获取body 转换成js 对象
           //  var oDivs = $("body > div") //获取所有的额div 集合
           //  oBody.removeChild(oDivs[oDivs.length-1]) //用JS对象删除


            //JQuery方式
            $("body").find("div:last").remove()

        })


        //新增
        $("#b1").click(function(){
            //1. 创建一个div
            //2. 获取body
            // 3. 将div添加到body中
            var r = Math.floor(Math.random()*255)
            var g = Math.floor(Math.random()*255)
            var b = Math.floor(Math.random()*255)

            $("body").append( $("<div style='width:100px;height:100px;border:1px solid #000;background:rgb("+r+","+g+","+b+")'></div>"))
        })
    })
</script>
</html>